
var container; //, stats;
var camera,
    scene,
    renderer;
var group;
var r = 150;
var cameraZ = 500;
var mouseX = 0,
    mouseY = 0;
    mouseZ = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {
  container = document.getElementById('container');

  // 实例化相机
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
  camera.position.z = cameraZ;

  // 实例化场景
  scene = new THREE.Scene();

  //创建实物组
  group = new THREE.Group();

  // 材质贴图加载器
  // addEarth(scene);
  //文字
  addText(scene, 'AI Xiao Zhi');

  //stars
  scene.add(getStars());

  //辅助线
  // addHelpLines(scene);

  //环境光
  var alight = new THREE.AmbientLight(0xffffff);
  scene.add(alight);
  // 点光源
  var light = new THREE.PointLight(0xffffff, 100);
  light.position.set(200, 200, 400);
  scene.add(light);

  //实例化渲染器
  renderer = new THREE.CanvasRenderer();
  renderer.setClearColor(0x000000);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container && container.appendChild(renderer.domElement);

  //绑定事件
  document.addEventListener('mousemove', onDocumentMouseMove, false);
  // controls = new THREE.OrbitControls( camera, renderer.domElement );
  window.addEventListener('resize', onWindowResize, false);
  // WindowResize(renderer, camera);

}
//材质贴图
function addEarth(scene){
  var loader = new THREE.TextureLoader();
  loader.load('images/ocean_earth.jpg', function(texture) {
    var geometry = new THREE.SphereGeometry(r, 30, 30);
    var material = new THREE.MeshBasicMaterial({
      map: texture,
      overdraw: 0.5
    });
    var mesh = new THREE.Mesh(geometry, material);
    group.add(mesh);
    scene.add(group);
  });
}
function addText(scene, text){
  var x = -250;
  var loader = new THREE.FontLoader();
  var colors = ['#00ff00', '#ff9248', '#ffda01', '#01d080', '#00f3ff', '#4072ff', '#9935d3', '#ff3e3e', '#ff9248', '#ffda01', '#01d080', '#00f3ff'];
  loader.load('../vendors/threejs/helvetiker_regular.typeface.js', function(font) {
    var ts = text.replace(/\s/g, '').split('');
    // for (var i = 0, t; t = ts[i]; i++) {
      var mesh = new THREE.Mesh(new THREE.TextGeometry(text, {
          font: font,
          size: 80,
          height: 42,
          weight: 'bord'
      }), new THREE.MeshLambertMaterial({color: '#01d080'}));
      mesh.position.x = x;
      scene.add(mesh);
    // }
  });
}

//辅助线
function addHelpLines(scene){
  var O = new THREE.Vector3(0, 0, 0);
  var X = new THREE.Vector3(200, 0, 0);
  var Y = new THREE.Vector3(0, 200, 0);
  var Z = new THREE.Vector3(-50, -50, 300);
  var colors = ['#ff0000', '#00ff00', '#0000ff']
  for (var i = 0, p = [X, Y, Z]; i < p.length; i++) {
    var geometry = new THREE.Geometry();
    geometry.vertices.push(O);
    geometry.vertices.push(p[i]);
    var line = new THREE.Line(geometry,
      new THREE.LineBasicMaterial({
        color: colors[i]
      }));
    scene.add(line);
  }
}

//stars
function getStars() {
  var starGroup = new THREE.Group();
  for (var i = 0; i < 5000; i++) {
    var x = parseInt(4 * windowHalfX * (2 * Math.random() - 1));
    var y = parseInt(4 * windowHalfX * (2 * Math.random() - 1));
    var cube = new THREE.Mesh(
      new THREE.SphereGeometry(3, 3, 3, 6, 6, 6),
      new THREE.MeshBasicMaterial({
        color: 0xffffff
      })
    );
    cube.position.x = x;
    cube.position.y = y;
    var z = parseInt(60 * (2 * Math.random() - 1));
    cube.position.z = z;
    starGroup.add(cube);
  }
  return starGroup;
}

function getDomSize(dom) {
  return {
    width: dom.innerWidth,
    height: dom.innerHeight,
  }
}

function onWindowResize() {
  var windowSize = getDomSize(window);
  var width_ = windowSize.width;
  var height_ = windowSize.height;
  //全局
  windowHalfX = width_ / 2;
  windowHalfY = height_ / 2;

  camera.aspect = width_ / height_;
  camera.updateProjectionMatrix();
  renderer.setSize(width_, height_);

}

function onDocumentMouseMove(event) {
  //相对中心点的位移
  mouseX = (event.clientX - windowHalfX);
  mouseY = (event.clientY - windowHalfY);
}

//动画
function animate() {
  requestAnimationFrame(animate);
  render();
  // setInterval(function () {
  //   render();
  // }, 30);
}

//渲染
function render() {
  // camera.position.x += ( mouseX - camera.position.x ) * 0.1;
  // camera.position.y += ( - mouseY - camera.position.y ) * 0.1;
  // camera.position.z += (mouseY - camera.position.y ) * 0.1;
  // console.log(mouseX, mouseY, mouseZ);
  // if( camera.position.x > 0 - windowHalfX && camera.position.x < windowHalfX){
    if(mouseX == 0){
      camera.position.x = 0;
    }else{
      camera.position.x += mouseX * 0.5;
    }
  // }
  // if(camera.position.y > 0 - windowHalfY && camera.position.y < windowHalfY){
    if(mouseY == 0){
      camera.position.y = 0;
    }else{
      camera.position.y += mouseY * 0.5;
    }
  // }
  // mouseZ 接收 （缩小）-1 (还原)0 (放大)1
  // if( camera.position.z > r && camera.position.z < 1500){
    if(mouseZ == 0){
      camera.position.z = cameraZ;
    }else{
      camera.position.z += -mouseZ * 0.5;
    }
  // }

  camera.lookAt(scene.position);
  //组转
  group.rotation.y -= 0.02;
  renderer.render(scene, camera);

}


// 接口封装
// 移除3d
function remove3d(){
  camera = null;
  scene = null;
  renderer = null;
  group = null;
  container.getElementsByTagName('canvas').remove();
  container = null;
}

function moveX(x) {
  mouseX = x;
}
function moveY(y) {
  mouseY = y;
}
function scale(z) {
  mouseZ = z;
}
// setTimeout(function(){
//   addEarth(scene);
// }, 5000);